<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网站换肤</title>
  <!-- 初始化样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>
<style>
   body{
    background-image: url();
   }
</style>

<body>
  <div class="container">
    <div class="nav">
      <div class="left">
        <ul>
          <li><a href="http://yun.itheima.com/?webzly" target="_blank" rel="nofollow">免费教程</a></li>
          <li><a href="http://resource.ityxb.com/booklist/?webzly" target="_blank" rel="nofollow">原创书籍</a></li>
          <li><a href="http://www.itheima.com/teacher.html?webzly#ajavaee" target="_blank" rel="nofollow">教研团队</a></li>
          <li><a href="http://www.itheima.com/special/hmschool/index.shtml?webzly" target="_blank" rel="nofollow">校区汇总</a></li>
          <li><a href="http://www.itheima.com/flow/flow.html?webzly" target="_blank" rel="nofollow">报名流程</a></li>
          <li><a href="https://pip.itcast.cn?hmgw$webzly" target="_blank" rel="nofollow">项目信息站</a></li>
          <li><a href="http://bbs.itheima.com/forum.php?webzly" target="_blank" rel="nofollow">技术社区</a></li>
        </ul>
      </div>
      <div class="right">
        <label for="skin">更换皮肤</label>
        <input class="skin-ipt" type="file" id="skin">
      </div>
    </div>
    <div class="search-container">
      <img src="https://www.itheima.com/images/logo.png" alt="">
      <div class="search-box">
        <input type="text">
        <button>搜索一下</button>
      </div>
    </div>
  </div>
  <!-- 导入axios -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.3/axios.js"></script>
  <script>
    //
     const ipt =document.querySelector('.skin-ipt')
     const body = document.body
     // 设置基地址
    // axios.defaults.baseURL = 'http://geek.itheima.net'
    const api ='http://geek.itheima.net/v1_0/upload'
     ipt.addEventListener('change',function(e){
         const data = new FormData()
         data.append('image',ipt.files[0])
         axios({
          url:api,
          method:'post',
          data
         }).then(res =>{
          console.log(res)
          body.style.backgroundImage = `url(${res.data.data.url})`
          //本地存储
          localStorage.setItem('body_url',JSON.stringify(res.data.data.url))
        
         })
         

     })
    
     
     
  </script>
 
</body>

</html>